<template>
  <div class="dashboard-container">
    <el-row :gutter="30">
      <el-col :span="12">
        <div class="mod_default_box">
          <div class="header">待处理</div>
          <div class="content">
            <div class="pending-status">
              <div class="title">待付款</div>
              <div class="num">0</div>
            </div>
            <div class="pending-status">
              <div class="title">待发货</div>
              <div class="num">0</div>
            </div>
            <div class="pending-status">
              <div class="title">待确认</div>
              <div class="num">0</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="mod_default_box">
          <div class="header">今日数据</div>
          <div class="content">
            <div class="pending-status">
              <div class="title">支付金额</div>
              <div class="num"
                   style="color:red">¥0.00</div>
              <div class="yestoday">昨日：0</div>
            </div>
            <div class="pending-status">
              <div class="title">订单数</div>
              <div class="num">0</div>
              <div class="yestoday">昨日：0</div>
            </div>
            <div class="pending-status">
              <div class="title">访客数</div>
              <div class="num">0</div>
              <div class="yestoday">昨日：0</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="30"
            style="margin-top:30px">
      <el-col :span="12">
        <div class="mod_default_box">
          <div class="header">商品管理</div>
          <div class="content">
            <div class="pending-status">
              <div class="title">销售中</div>
              <div class="num">0</div>
            </div>
            <div class="pending-status">
              <div class="title">待上架</div>
              <div class="num">0</div>
            </div>
            <div class="pending-status">
              <div class="title">新增商品</div>
              <div style="margin-top:20px">
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-plus"></el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding-top: 60px;
  max-width: 1200px;
  margin: 0 auto;
  height: 93vh;
  .mod_default_box {
    background: #fff;
    width: 100%;
    border-radius: 10px;
    padding: 30px;
    height: 300px;
    .header {
      font-size: 20px;
      font-weight: 700;
    }
    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 60px;
      .pending-status {
        text-align: center;
        flex-grow: 1;
        position: relative;
        .title {
          font-size: 18px;
          color: #444;
        }
        .num {
          font-size: 30px;
          font-weight: 500;
          margin-top: 20px;
        }
        .yestoday {
          margin-top: 20px;
          color: #555;
        }
      }
    }
  }
}
</style>
